﻿<template>
  <div v-loading = 'loading'>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent'>
      <!-- 检索部分 -->
      <div class = 'page_searchContent'>
        <el-input placeholder = "请输入账号名称" v-model = 'searchKey' prefix-icon = "el-icon-search"></el-input>
      </div>
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border>
          <el-table-column align = 'center' v-for='(item) in tableColumn' :key = 'item.indexName' :label = 'item.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align = "center" width = '230'>
            <template slot-scope="scope">
              <el-button type = 'text' @click = "handleAsign(scope.row)"><i class = 'iconfont icon-geren'></i>角色授权</el-button>
              <el-button type = 'text' @click = "handleEdit(scope.row)"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <el-button type = 'text' @click = "handleDelete(scope.row)"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = 'handleAdd ()'>添加账号</el-button>
        </div>
        <div class = 'page_paginationContent'>
          <el-pagination
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :page-size = 'pageSize'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑和添加账号的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = "closeDialog"
    :close-on-click-modal = 'false'>
      <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules' v-loading = 'dialogLoading'>
        <el-form-item label = "登录账号：" prop = 'loginId'>
          <el-input v-model = 'ruleForm.loginId' placeholder = "请输入登录账号" :disabled = "operationType === 'asign'"></el-input>
        </el-form-item>
        <el-form-item label = "登录名称：" prop = 'loginName' v-if = "operationType !== 'asign'">
          <el-input v-model = 'ruleForm.loginName' placeholder = "请输入登录名称"></el-input>
        </el-form-item>
        <el-form-item label = '登录密码：' prop = 'loginPass' v-if = "operationType !== 'asign'">
          <el-input v-model = 'ruleForm.loginPass' placeholder = "请输入登录密码"></el-input>
        </el-form-item>
        <el-form-item label = "用户类型：" v-if = "operationType !== 'asign'">
          <el-select v-model = "ruleForm.userType" placeholder = "请选择用户类型">
            <el-option label = "超级管理员" value = "System"></el-option>
            <el-option label = "普通用户" value = "User"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = '用户编号：' v-if = "operationType !== 'asign'">
          <el-input v-model = 'ruleForm.userNo' placeholder = "请输入用户编号" @focus="(ruleForm.userType === 'Student' || ruleForm.userType === 'Teacher') ? selectNo() : ''"></el-input>
        </el-form-item>
        <el-form-item label = '指定角色：' v-if ="operationType === 'asign'" prop='role'>
          <el-select v-model = "ruleForm.role" placeholder = "请为该账号指定角色" multiple>
            <el-option v-for = 'item in roleList' :key = 'item.roleno' :label = 'item.rolename' :value = 'item.roleno'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = '手机号码：' v-if = "operationType !== 'asign'" prop = 'userMobile'>
          <el-input v-model = 'ruleForm.userMobile' placeholder = "请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label = 'QQ号码：' v-if = "operationType !== 'asign'" prop = 'userQQ'>
          <el-input v-model = 'ruleForm.userQQ' placeholder = "请输入用户QQ号"></el-input>
        </el-form-item>
        <el-form-item label = '用户头像：' v-if = "operationType !== 'asign'">
          <el-upload ref = 'upload' :action = 'actionUrl' :file-list = 'fileList' :limit = '1' :auto-upload = "false"
          :class = "(operationType === 'edit' || operationType === 'add') ? '' : 'hiddenUploadInput'"
          accept = '.png, .jpg, .jpeg, .gif' list-type = "picture-card" :on-exceed = 'onExceed' :on-change = 'changeAvatarUpload' :before-remove = 'removeUpload'
          :http-request = "uploadUserAvatarMethod">
            <i class = "el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
          <el-button type = "primary" @click = "submitForm ('ruleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 选择编号的弹出窗 -->
    <V-Select :showDialog = 'showDialog' @giveUp = 'showDialog=false' @sureSelect = 'sureSelect'></V-Select>
  </div>
</template>

<script src='./accountM.js'></script>
